<!-- <template>
	<swiper @change="swiperChange" vertical='true' class="palycontainer" :circular="iscircular" :current="currentIndex"
		@touchstart="start" @touchend="end">
		<swiper-item v-for="(item,index) in itemlist" :key='index'>
			<PlayItem @back='back' :PlayerItem='PlayerItem' :ref='item.id' />
		</swiper-item>
		<video @tou></video>
	</swiper>

</template>

<script>
	import PlayItem from './playItem.vue'
	export default {
		components: {
			PlayItem
		},
		data() {
			return {
				currentIndex: 0,
				iscircular: true,
				PlayerItem: {
					name: '重庆最美高校景象',
					school: '重庆大学',
					schoolurl: 'https://cdn.img.up678.com/icon/school/02重庆大学1.jpg',
					coverurl: 'https://cdn.img.up678.com/ueditor/upload/image/20211112/1636697557634091425.jpg',
					view: '20w',
					vote: '4.8k',
					id: '021424',
					videosrc: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4',
					poster: 'https://cdn.img.up678.com/ueditor/upload/image/20211112/1636697557634091425.jpg',
					comment: [{
							title: '人文与艺术类',
							number: '1.3w',
							id: parseInt(Math.random() * 10000),
							active: false,
						},
						{
							title: '永远的神',
							number: '1.3w',
							id: parseInt(Math.random() * 10000),
							active: false,
						},
						{
							title: '这个也太ku了吧',
							number: '300',
							id: parseInt(Math.random() * 10000),
							active: false,
						},
						{
							title: 'LOVE',
							number: '1w',
							id: parseInt(Math.random() * 10000),
							active: false,
						},
						{
							title: '这个也太ku了吧',
							number: '300',
							id: parseInt(Math.random() * 10000),
							active: false,
						},
					]
				},
				itemlist: [{
					id: 'play0'
				}, {
					id: 'play1'
				}, {
					id: 'play2'
				}],
				//滑动监听
				startData: {
					clientY: "",
					clientX: "",
				},
				endData: {
					clientY: "",
					clientX: "",
				},
			}
		},
		mounted() {
			// 首屏播放
			this.$refs[`play0`][0].outplay()
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1,
					// success: function() {
					// 	beforePage.$vm.init(); // 执行前一个页面的刷新
					// }
				});
			},
			start(e) {
				this.startData.clientX = e.changedTouches[0].clientX;
				this.startData.clientY = e.changedTouches[0].clientY;
			},
			end(e) {
				this.endData.clientX = e.changedTouches[0].clientX;
				this.endData.clientY = e.changedTouches[0].clientY;
			},

			swiperChange(e) {
				// sweiper切换 控制video播放与暂停
				for (var i = 0; i < this.itemlist.length; i++) {
					if (i !== e.detail.current) {
						this.$refs[`play${i}`][0].outpause()
					}
				}
				this.$refs[`play${e.detail.current}`][0].outplay()
				// 判断是上滑下滑
				const subX = this.endData.clientX - this.startData.clientX;
				const subY = this.endData.clientY - this.startData.clientY;
				if (subY > 30) {
					console.log('上滑')
				}
				if (subY < -30) {
					console.log('下滑')
				}
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.palycontainer {
		width: 100%;
		height: 100vh;
	}
</style>
 -->